<template>
  <div>
    <div class="btns">
      <el-form inline size="small">
        <el-form-item label-width="100px">
          <el-input v-model="param.realname"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="loadData">搜索</el-button>
        </el-form-item>
        <el-button size="small" type="primary" @click="toaddHandler" style="float: right; margin-right: 80px">新增</el-button>
        <el-button size="small" type="primary" style="float:right;margin-right: 10px" @click="DownloadHandler" >导出</el-button>
      </el-form>
    </div><hr/>
    <div id="statictis"></div>
    <div>
      <el-table :data="logData.slice((currentPage - 1) * PageSize, currentPage * PageSize)"  style="width: 90%; margin-left: 5%">
        <el-table-column type="index"  :index="1" label="序号" align="center" width="80"></el-table-column>
        <el-table-column prop="realname" label="真实姓名" align="center"></el-table-column>
        <el-table-column prop="method" label="方法" align="center"></el-table-column>
        <el-table-column prop="content" label="内容" align="center"></el-table-column>
        <el-table-column prop="logTime" label="时间" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.logTime | fmtDate}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <!-- 定制-插槽 -->
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteHandler(scope.row)"><i class="el-icon-delete"></i></el-button>
            <el-button type="text" size="mini" @click="editHandler(scope.row)"><i class="el-icon-edit"></i></el-button>
          </template>
        </el-table-column> 
      </el-table>
      <div style="text-align:center;height:100px;margin-top:30px"><el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      /></div>
      
    </div>
  </div>
</template>

<script>
import { get, post, del } from "@/utils/request";
export default {
  data() {
    return {
      param: { realname: "" },
      logData: [],
      contentData: [],
      Abscissa: [],
      Callnumber: [],
       // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [2, 4, 6, 8],
      // 默认每页显示的条数（可修改）
      PageSize: 10,
      //定义的总数
      total: 0,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
     handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    initchart() {
      var chart = Highcharts.chart("statictis", {
        chart: {
          type: "column",
        },
        title: {
          text: "接口调用次数统计图",
        },
        xAxis: {
          categories: this.Abscissa,   
        },
        yAxis: {
          labels: {
            x: -15,
          },
          title: {
            text: "调用次数",
          },
        },
        series: [
          {
            name: "",
            data: this.Callnumber, 
          },
        ],
        responsive: {
          rules: [
            {
              condition: {
                maxWidth: 500,
              },
              // Make the labels less space demanding on mobile
              chartOptions: {
                xAxis: {
                  labels: {
                    formatter: function () {
                      return this.value.replace("月", "");
                    },
                  },
                },
                yAxis: {
                  labels: {
                    align: "left",
                    x: 0,
                    y: -2,
                  },
                  title: {
                    text: "",
                  },
                },
              },
            },
          ],
        },
      });
      function setSize(width) {
        chart.setSize(width, 300);
      }
    },
    statistic() {
      let contentlist = this.logData.map((obj) => {
        return obj.content;
      });
      let M = contentlist.filter((item, index) => {
        return contentlist.indexOf(item, 0) === index;
      });
      let result = {};
      for (let m of M) {
        result[m] = contentlist.filter((item) => {
          return item == m;
        }).length;
      }
      let key = [];
      let value = [];
      for(let k in result) {
        key.push(k);
        value.push(result[k]);
      }
      this.Abscissa=key
      this.Callnumber=value
      console.log(key, value)
      this.contentData = result;
      this.initchart()
    },

    DownloadHandler() {
      window.location.href ="http://39.106.31.187:8888/BaseLog/download?realname="+this.param.realname;
    },
    editHandler(row) {
      this.$router.push({
        path: "/config/logcreate",
        query: row,
      });
    },
    deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/BaseLog/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadData();
        });
      });
    },
    toaddHandler() {
      this.$router.push("/config/logcreate");
    },
    loadData() {
      let url = "http://39.106.31.187:8888/BaseLog/query";
      get(url, this.param).then((resp) => {
        this.logData = resp.data;
        this.statistic();
        this.total = resp.data.length;
      });
    },
  },
  mounted() {
    // this.initchart();
  },
};
</script>
<style  scoped>
.statictis {
  text-align: center;
}
</style>